<!-- AI模板 -->
<template> 
  <div class="dashboard-editor-container">
    <div class="xxx" style="margin-top: 10px;">
      <div style="display:flex;justify-content:space-between;">
        <partitionTree :nodeData="nodeData" :defaultProps="defaultProps" :dialogName="'进程分类'" @handleNodeClick="handleNodeClick" @submitTemplete="submitTemplete" @deleteNode="deleteNode" ref="partitionTree" @toggleVisibility="toggleVisibility"></partitionTree>
        <div :style="{ width:containerWidth}"  class="box" style="background:#fff;border: 1px solid #ddd;border-radius: 4px;box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);">
          <el-button type="primary" @click="addModer">添加进程</el-button>
          <el-button type="primary" @click="reviseModer">批量修改</el-button>
          <el-table stripe border :data="tableData" style="width: 100%; margin-top: 15px" height="730">
            <el-table-column label="序号" width="80" type="index" :index='(index) => { return (index + 1) + (pageNum - 1) * pageSize }'> </el-table-column>
            <el-table-column label="进程分类" prop="Class"  show-overflow-tooltip></el-table-column>
            <el-table-column label="进程名称" prop="Name"   show-overflow-tooltip></el-table-column>
            <el-table-column label="执行文件名" prop="ExeName"   show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="210px"  fixed="right" >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="changeModer(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="deleteModer(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog 
      :close-on-click-modal="false" 
      :close-on-press-escape="false" 
      :visible.sync="moderVisible"
      :title="Action === 1 ? '添加进程' : '修改进程'" 
      v-el-drag-dialog @close="Moder = {}" width="30%">
      <el-form label-width="100px" :rules="rules" :model="Moder" ref="Moder">
        <el-form-item label="执行文件" prop="ExeName">
          <el-input placeholder="请输入执行文件"  :disabled="Action === 2" oninput="value=value.replace(/[^0-9a-zA-Z.]/g,'')" maxlength="32" v-model="Moder.ExeName"></el-input>
        </el-form-item>
        <el-form-item label="进程分类" prop="Class">
          <el-select v-model="Moder.Class" placeholder="请选择进程分类" style="width:100%">
            <el-option  v-for="item in partitionList" :key="item.Name" :label="item.Name" :value="item.Name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="进程名称" prop="Name">
          <el-input placeholder="请输入进程名称" maxlength="16"  v-model="Moder.Name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <el-button type="info" @click="moderVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- @close="Moder = {}" -->
    <el-dialog 
      top="30px"
      :close-on-click-modal="false" 
      :close-on-press-escape="false" 
      :visible.sync="reviseModerVisible"
      title="批量修改" 
      :fullscreen="dialogFull"
      v-el-drag-dialog  width="75%">
        <template slot="title">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
            批量修改
          </span>
          <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
            <i class="el-icon-full-screen"   v-if="dialogFull == false"/>
            <i class="el-icon-copy-document" v-else/>
          </div>
        </div>
      </template>
        <el-table stripe border :data="tableMore" style="width: 100%; margin-top: 5px" height="615" @cell-mouse-enter="handleCellEnter"
          @cell-mouse-leave="handleCellLeave" @cell-click="handleCellClick">
          <el-table-column label="序号" width="80" type="index" :index='(index) => { return (index + 1) + (pageNum_revise - 1) * pageSize_revise }'> </el-table-column>
          <el-table-column label="进程文件名" prop="ProcExe"  show-overflow-tooltip></el-table-column>
          <el-table-column label="执行文件全路径" prop="FullPath"   show-overflow-tooltip></el-table-column>
          <el-table-column label="窗口标题" prop="Title"   show-overflow-tooltip></el-table-column>
          <el-table-column label="签名厂商" prop="CertFactory"   show-overflow-tooltip></el-table-column>
            <el-table-column label="进程名称" prop="Name"   show-overflow-tooltip>
              <div class="item" slot-scope="scope">
                <el-input class="item__input" v-model="scope.row.Name"  placeholder="请输入进程名称" maxlength="16"></el-input>
                <p v-if="scope.row.Name === ''" style="color: #ff4949;font-size: 12px;line-height: 1;padding-top: 4px;">进程名称不能为空</p>
              </div>
          </el-table-column>
          <el-table-column label="进程分类" prop="Class"  show-overflow-tooltip>
            <div class="item" slot-scope="scope">
              <el-select class="item__input" v-model="scope.row.Class" placeholder="请选择进程分类">
                <el-option  v-for="item in partitionList" :key="item.Name" :label="item.Name" :value="item.Name"></el-option>
              </el-select>
            </div>
          </el-table-column>
        </el-table>
        <el-pagination 
          @size-change="handleSizeChange_revise"
          @current-change="handleCurrentChange_revise" 
          :current-page=pageNum_revise
          :page-size=pageSize_revise
          background 
          layout="total, prev, pager, sizes, next, jumper"
          :total="Total_revise">
        </el-pagination>
        <span slot="footer" class="dialog-footer"> 
          <el-button type="primary" @click="submitRevise()">确 定</el-button>
          <el-button type="info" @click="reviseModerVisible = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { connrequest } from '@/api/firstPage'
import elDragDialog from "@/directive/el-drag-dialog"; 
import partitionTree from "@/components/partitionTree"; 
export default {
  directives: { elDragDialog },
  components: {
    partitionTree
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      pageNum_revise: 1,
      pageSize_revise: 10,
      Total_revise:0,
      containerWidth: 'calc(100% - 275px)',
      tableData: [],
      tableMore:[],
      nodeData: [],
      defaultProps: {
        children: 'Class',
        label: 'Name',
        Count: 'Count'
      },
      Action: 1,
      Moder: {},
      moderVisible: false,
      reSource: [],
      partitionList: [],
      rules:{
        Name: [
          {required: true, message: '请输入进程名称', trigger: 'blur'}
        ],
        Class: [
          {required: true, message: '请选择进程分类', trigger: 'change'}
        ],
        ExeName: [
          {required: true, message: '请输入执行文件', trigger: 'blur'}
        ]
      },
      dialogFull:false,
      reviseModerVisible:false,
      // 需要编辑的属性
      editProp: ['ExeName', 'Class'],
      clickCellMap: {}
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    async getData() {
      const res = await connrequest('GetDictProcTree')
      let partitionList = []
      res.Data.Name = res.Data.RootName //因为后端返回的所有分区名字叫RootName，子菜单又叫Name, 这里做个转换
      res.Data.disabled = true
      res.Data.edit = false
      res.Data.Class.map(item => {
        item.edit = false
        partitionList.push(item)
      })
      this.nodeData = [res.Data]
      this.partitionList = partitionList
      this.GetDictArea(this.PrimName)
    },
    async GetDictArea(Name){
      const data = {
        Filter:{
          Name: Name || ''
        }
      }
      const res = await connrequest('GetDictProc', data)
      this.tableData = res.Data
      if(Name === '' || Name === undefined){  //获取所有编码
        let partitionNumber = []
        res.Data.map(item => {
          partitionNumber.push(item.AreaCode)
        })
        this.partitionNumber = partitionNumber
      }
    },
    handleNodeClick(nodeData){
      const {data} = nodeData
      let PrimName = data.Name === '所有进程' ? '' : data.Name
      this.PrimName = PrimName
      this.$set(this.Moder, 'PrimArea', PrimName)
      this.GetDictArea(PrimName)
    },
    async submitTemplete(node){
      const data = {
        Data:{
          Action: node.Action,
          Detail:{
            Name: node.Name
          }
        }
      }
      const res = await connrequest('EditDictProcTree', data)
      if(res.Status.StatusCode === 0){
        this.$message.success(node.Action === 1 ? '新增成功' : '修改成功')
        this.$refs.partitionTree.moderVisible = false
        this.getData()
      }
    },
    async deleteNode(node){
      if(node.Count > 0){
        this.$message.error('该进程下还有数据，请清空后再删除')
        return
      }
      const data = {
        Data:{
          Action: 3,
          Detail:{
            Name: node.Name
          }
        }
      }
      const res = await connrequest('EditDictProcTree', data)
      if(res.Status.StatusCode === 0){
        this.$message.success('删除成功')
        this.getData()
      }
    },
    addModer(){
      this.Action = 1
      this.Moder = {PrimArea: this.PrimName || this.partitionList[0]?.PrimName}
      this.$nextTick(() => {
        this.$refs.Moder.clearValidate();
      })
      this.moderVisible = true
    },
    async reviseModer(){
      const data = {
        Paging:{
          QueryPageNo: this.pageNum_revise,
          QueryPageLength: this.pageSize_revise
        } 
      }
      const res = await connrequest('GetUnknownDictProc',data)
      this.tableMore = res.Data || []
      // let processInfo = {
      //   ProcExe: 1,
      //   FullPath: 2,
      //   Title: 3,
      //   CertFactory: 4
      // };
      // this.tableMore.push(processInfo)
      this.reviseModerVisible = true
      this.Total_revise = res.Paging.TotalCount
    },
    changeModer(row){
      this.Action = 2
      this.Moder = {...row}
      this.moderVisible = true
    },
    deleteModer(row){
      this.$confirm('此操作将永久删除该进程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          Data: {
            Action: 3,
            Detail: {...row}
          }
        }
        const res = await connrequest('EditDictProc', data)
        if(res.Status.StatusCode === 0){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    async submit(){
      this.$refs['Moder'].validate(async (valid) => {
        if (valid) {
          const data = {
            Data: {
              Action: this.Action,
              Detail: {...this.Moder}
            }
          }
          const res = await connrequest('EditDictProc', data)
          if(res.Status.StatusCode === 0){
            this.$message.success(this.Action === 1 ? '新增成功' : '修改成功')
            this.moderVisible = false
            this.getData()
          }
        }
      })
    },
    async submitRevise(){
      // const isNameValid = this.tableMore.every(item => item.Name != undefined &&item.Name.length !== 0);
      // const isClassValid = this.tableMore.every(item => item.Class != undefined &&item.Class.length !== 0);
      // if (isNameValid && isClassValid) {
        const data = {
            Data: [...this.tableMore]
          }
        if(data.Data.length == 0){
          this.reviseModerVisible = false;
          return
        }
        else{
          const res = await connrequest('SetUnknownDictProc', data)
          if(res.Status.StatusCode === 0){
            this.$message.success('修改成功')
            this.getData()
            this.reviseModerVisible = false;
          }
        }
      // }
      // else{ 
      //   if(!isNameValid) this.$message.info('进程名称不能为空');
      //   else            this.$message.info('进程分类不能为空');
      // }
    },
    /** 鼠标移入cell */
    handleCellEnter (row, column, cell, event) {
      // const property = column.property
      // if (property === 'date' || property === 'name' || property === 'food') {
      //   cell.querySelector('.item__txt').classList.add('item__txt--hover')
      // }
    },
    // /** 鼠标移出cell */
    handleCellLeave (row, column, cell, event) {
      // const property = column.property
      // if (this.editProp.includes(property)) {
      //   cell.querySelector('.item__txt').classList.remove('item__txt--hover')
      // }
    },
    /** 点击cell */
    handleCellClick (row, column, cell, event) {
      const property = column.property
      if (this.editProp.includes(property)) {
        // 保存cell
        this.saveCellClick(row, cell)
        // cell.querySelector('.item__txt').style.display = 'none'
        cell.querySelector('.item__input').style.display = 'block'
        cell.querySelector('input').focus()
      }
    },
    /** 取消编辑状态 */
    cancelEditable (cell) {
      // cell.querySelector('.item__txt').style.display = 'block'
      cell.querySelector('.item__input').style.display = 'none'
    },
    /** 保存进入编辑的cell */
    saveCellClick (row, cell) {
      const id = row.id
      if (this.clickCellMap[id] !== undefined) {
        if (!this.clickCellMap[id].includes(cell)) {
          this.clickCellMap[id].push(cell)
        }
      } else {
        this.clickCellMap[id] = [cell]
      }
    },
    toggleVisibility(isHidden) {
      if(isHidden)
        this.containerWidth = '100%';
      else 
        this.containerWidth = 'calc(100% - 275px)';
    },
    handleSizeChange_revise(pageSize){
      this.pageSize_revise = pageSize
      this.pageNum_revise = 1
      this.reviseModer()
    },
    handleCurrentChange_revise( pageNum ){
      this.pageNum_revise = pageNum
      this.reviseModer()
    }
  }
};
</script>
<style scoped lang="scss">
.box {
  background-color: lightblue;
  transition: width 0.5s; /* 添加过渡动画 */
}
.item{
    .item__input{
      display: block;
      width: 100%;
      /* 调整elementUI中样式 如果不需要调整请忽略 */
      .el-input__inner{
        height: 24px!important;
      }
      /* 调整elementUI中样式 如果不需要调整请忽略 */
      .el-input__suffix{
        i{
          font-size: 12px !important;
          line-height: 26px !important;
        }
      }
    }
    .item__txt{
      box-sizing: border-box;
      border: 1px solid transparent;
      width: 100px;
      line-height: 24px;
      padding: 0 8px;
    }
    .item__txt--hover{
      border: 1px solid #dddddd;
      border-radius: 4px;
      cursor: text;
    }
  }

/* dialog header */
.avue-crud__dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.el-dialog__title {
  color: rgba(0,0,0,.85);
  font-weight: 500;
  word-wrap: break-word;
}
.avue-crud__dialog__menu {
  padding-right: 35px;
  float: left;
}
.avue-crud__dialog__menu i {
  color: white;
  font-size: 15px;
}
.el-icon-full-screen{
  cursor: pointer;
}
.el-icon-full-screen:before {
  content: "\e719";
}
.el-icon-copy-document{
  cursor: pointer;
}
</style>
